@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <div class="panel-header">
                <div class="panel-title">
                    角色授权
                </div>
            </div>
            <div class="panel-main access">
                <el-form :model="form" ref="form">
                    @foreach($menus as $menu)
                        <p class="access-p">{{ $menu['title'] }}</p>
                        @foreach($menu['node'] as $key=>$node)
                            <el-form-item>
                                <span class="access-span" title="点我全选{{ $node['name'] }}" alt="点我全选{{ $node['name'] }}">{{ $node['name'] }}</span>
                                <el-checkbox-group v-model="form.rules">
                                    @foreach($node['child'] as $k=>$child)
                                        <el-checkbox style="margin-right: 15px" label="{{ $k }}">{{ $child['name'] }}</el-checkbox>
                                    @endforeach
                                </el-checkbox-group>
                            </el-form-item>
                        @endforeach
                    @endforeach
                    <el-form-item style="padding-left: 150px;margin-top: 100px">
                        <el-button type="primary" @click="update()">确 定</el-button>
                        <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        form:{
                            id: "{{ $id }}",
                            rules: {!! $rules !!},
                            _token: "{{csrf_token()}}"
                        },
                    }
                },
                created(){

                },
                methods: {
                    //返回
                    back(){
                        window.history.go(-1);
                    },
                    //更新
                    update(){
                        let that = this;
                        $.post("{{ route('admin.role.store') }}",this.form,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: res.msg,
                                    onClose:() =>{
                                        window.history.go(-1);
                                    }
                                });
                            }
                        },'JSON');
                    },
                }
            });

            $('.access-span').click(function () {
                $(this).parent().find("input[type='checkbox']").each(function(){
                    let id = $(this).val();
                    if(app.form.rules.indexOf(id)){
                        app.form.rules.push(id);
                    }
                });
            });
        });
    </script>
@endsection
